<template>
  <div class="container-page">
    <!-- 搜索区域 -->
    <div class="search-container">
      <el-form :inline="true" :model="searchForm" class="demo-form-inline">
        <el-form-item label="装箱单号">
          <el-input v-model="searchForm.packagingCode" placeholder="请输入装箱单号" clearable />
        </el-form-item>
        <el-form-item label="条码内容">
          <el-input v-model="searchForm.salesCode" placeholder="请输入条码内容" clearable />
        </el-form-item>
        <el-form-item label="销售订单编号">
          <el-input v-model="searchForm.salesOrderNo" placeholder="请输入销售订单编号" clearable />
        </el-form-item>
        <el-form-item label="客户编码">
          <el-input v-model="searchForm.clientCode" placeholder="请输入客户编码" clearable>
            <template #append>
              <el-button icon="Search" @click="openCustomerSelectSearch" style="width: auto; padding: 0 10px;">
                <span style="margin-left: 5px;">搜索</span>
              </el-button>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="客户名称">
          <el-input v-model="searchForm.clientName" placeholder="请输入客户名称" clearable />
        </el-form-item>
        <el-form-item label="检查员名称">
          <el-input v-model="searchForm.inspectorName" placeholder="请输入检查员名称" clearable />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">搜索</el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 表格区域 -->
    <div class="table-container">
      <div class="table-operations">
        <el-button type="primary" @click="handleAdd">+ 新增</el-button>
      </div>
      
      <el-table 
        :data="tableData" 
        border 
        style="width: 100%"
        v-loading="loading"
        :header-cell-style="{ background: '#f5f7fa' }"
      >
        <el-table-column type="selection" width="50" align="center" />
        <el-table-column prop="id" label="ID" width="60" />
        <el-table-column prop="packagingCode" label="装箱单号" min-width="120" show-overflow-tooltip>
          <template #default="scope">
            <el-link type="primary" @click="handleView(scope.row)">{{ scope.row.packagingCode }}</el-link>
          </template>
        </el-table-column>
        <el-table-column prop="packagingName" label="装箱日期" min-width="150" show-overflow-tooltip>
          <template #default="scope">
            {{ formatDate(scope.row.packagingName) }}
          </template>
        </el-table-column>
        <el-table-column prop="salesCode" label="销售编号" min-width="120" show-overflow-tooltip />
        <el-table-column prop="invoiceCode" label="发票编号" min-width="120" show-overflow-tooltip />
        <el-table-column prop="clientCode" label="客户编码" min-width="100" show-overflow-tooltip />
        <el-table-column prop="clientName" label="客户名称" min-width="140" show-overflow-tooltip />
        <el-table-column prop="boxLength" label="箱长度" min-width="80" show-overflow-tooltip>
          <template #default="scope">
            {{ scope.row.boxLength || '-' }}
          </template>
        </el-table-column>
        <el-table-column prop="boxWidth" label="箱宽度" min-width="80" show-overflow-tooltip>
          <template #default="scope">
            {{ scope.row.boxWidth || '-' }}
          </template>
        </el-table-column>
        <el-table-column prop="boxHeight" label="箱高度" min-width="80" show-overflow-tooltip>
          <template #default="scope">
            {{ scope.row.boxHeight || '-' }}
          </template>
        </el-table-column>
        <el-table-column label="尺寸单位" min-width="80" show-overflow-tooltip>
          <template #default="scope">
            {{ scope.row.boxLength ? 'cm' : '-' }}
          </template>
        </el-table-column>
        <el-table-column prop="netweight" label="净重" min-width="80" show-overflow-tooltip>
          <template #default="scope">
            {{ scope.row.netweight || '-' }}
          </template>
        </el-table-column>
        <el-table-column prop="grossweight" label="毛重" min-width="80" show-overflow-tooltip>
          <template #default="scope">
            {{ scope.row.grossweight || '-' }}
          </template>
        </el-table-column>
        <el-table-column label="重量单位" min-width="80" show-overflow-tooltip>
          <template #default="scope">
            {{ scope.row.netweight ? 'kg' : '-' }}
          </template>
        </el-table-column>
        <el-table-column prop="inspectorName" label="检查员" min-width="100" show-overflow-tooltip />
        <el-table-column label="状态" min-width="80" show-overflow-tooltip>
          <template>
            <el-tag type="success">已完成</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="120" fixed="right">
          <template #default="scope">
            <el-button type="primary" link @click="handleEdit(scope.row)">修改</el-button>
            <el-button type="danger" link @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination-container">
        <div class="pagination-info">
          <span class="total-text">共 {{ total }} 条</span>
          <el-select v-model="pageSize" class="page-size-select" @change="handleSizeChange">
            <el-option
              v-for="size in [10, 20, 50, 100]"
              :key="size"
              :label="size + '条/页'"
              :value="size"
            />
          </el-select>
        </div>
        <el-pagination
          :current-page="currentPage"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          :total="total"
          :pager-count="7"
          background
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>

    <!-- 添加装箱单对话框 -->
    <container-add
      v-model:visible="addDialogVisible"
      @success="handleAddSuccess"
    />

    <!-- 查看装箱单详情对话框 -->
    <el-dialog
      v-model="viewDialogVisible"
      title="查看装箱单信息"
      width="800px"
      :close-on-click-modal="false"
    >
      <el-form
        ref="viewFormRef"
        :model="viewForm"
        label-width="100px"
        class="view-form"
      >
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="装箱单编号">
              <el-input v-model="viewForm.packagingCode" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="装箱日期">
              <el-input v-model="viewForm.packagingName" disabled />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="销售订单编号">
              <el-input v-model="viewForm.salesCode" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="发票编号">
              <el-input v-model="viewForm.invoiceCode" disabled />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="客户编码">
              <el-input v-model="viewForm.clientCode" disabled>
                <template #append>
                  <el-button icon="Search" disabled style="width: auto; padding: 0 10px;">
                    <span style="margin-left: 5px;">搜索</span>
                  </el-button>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="客户名称">
              <el-input v-model="viewForm.clientName" disabled />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="箱长度">
              <el-input v-model="viewForm.boxLength" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="箱宽度">
              <el-input v-model="viewForm.boxWidth" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="箱高度">
              <el-input v-model="viewForm.boxHeight" disabled />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="净重">
              <el-input v-model="viewForm.netweight" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="毛重">
              <el-input v-model="viewForm.grossWeight" disabled />
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="检查员">
          <el-input v-model="viewForm.inspectorName" disabled />
        </el-form-item>

        <el-form-item label="备注">
          <el-input
            v-model="viewForm.descs"
            type="textarea"
            :rows="3"
            disabled
          />
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 修改装箱单对话框 -->
    <el-dialog
      v-model="editDialogVisible"
      title="修改装箱单"
      width="800px"
      :close-on-click-modal="false"
      @close="handleEditDialogClose"
    >
      <el-form
        ref="editFormRef"
        :model="editForm"
        :rules="formRules"
        label-width="100px"
        class="edit-form"
      >
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="装箱单编号" prop="packagingCode">
              <el-input v-model="editForm.packagingCode">
                <template #append>
                  <el-switch v-model="editForm.autoGenerate" />
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="装箱日期" prop="packagingName">
              <el-date-picker
                v-model="editForm.packagingName"
                type="datetime"
                placeholder="选择装箱日期"
                style="width: 100%"
                value-format="YYYY-MM-DDTHH:mm:ss.SSSZ"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="销售订单编号" prop="salesCode">
              <el-input v-model="editForm.salesCode" placeholder="请输入销售订单编号" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="发票编号" prop="invoiceCode">
              <el-input v-model="editForm.invoiceCode" placeholder="请输入发票编号" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="客户编码" prop="clientCode">
              <el-input v-model="editForm.clientCode" placeholder="请输入客户编码">
                <template #append>
                  <el-button icon="Search" @click="openCustomerSelect" style="width: auto; padding: 0 10px;">
                    <span style="margin-left: 5px;">搜索</span>
                  </el-button>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="客户名称" prop="clientName">
              <el-input v-model="editForm.clientName" placeholder="请输入客户名称" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="箱长度" prop="boxLength">
              <el-input v-model="editForm.boxLength" placeholder="请输入箱长度">
                <template #append>
                  <el-select v-model="boxLengthUnit" placeholder="单位" style="width: 80px">
                    <el-option
                      v-for="unit in ['公支', '英支', '匹', '捆', '层', '套', 'N.m']"
                      :key="unit"
                      :label="unit"
                      :value="unit"
                    />
                  </el-select>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="箱宽度" prop="boxWidth">
              <el-input v-model="editForm.boxWidth" placeholder="请输入箱宽度" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="箱高度" prop="boxHeight">
              <el-input v-model="editForm.boxHeight" placeholder="请输入箱高度" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="净重" prop="netweight">
              <el-input v-model="editForm.netweight" placeholder="请输入净重">
                <template #append>
                  <el-select v-model="netweightUnit" placeholder="单位" style="width: 80px">
                    <el-option
                      v-for="unit in ['公支', '英支', '匹', '捆', '层', '套', 'N.m']"
                      :key="unit"
                      :label="unit"
                      :value="unit"
                    />
                  </el-select>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="毛重" prop="grossWeight">
              <el-input v-model="editForm.grossWeight" placeholder="请输入毛重" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="检查员" prop="inspectorName">
          <el-input v-model="editForm.inspectorName" placeholder="请输入检查员名称" />
        </el-form-item>

        <el-form-item label="备注" prop="descs">
          <el-input
            v-model="editForm.descs"
            type="textarea"
            :rows="3"
            placeholder="请输入备注信息"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="editDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitEdit" :loading="submitLoading">确 定</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 客户选择对话框 -->
    <customer-select
      v-model:visible="customerSelectVisible"
      @select="handleCustomerSelect"
    />

    <!-- 客户选择对话框 - 搜索表单使用 -->
    <customer-select
      v-model:visible="customerSelectSearchVisible"
      @select="handleCustomerSelectSearch"
    />
  </div>
</template>

<script setup>
import { ref, onMounted, reactive, watch } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import http from '@/api/http'
import ContainerAdd from './components/ContainerAdd.vue'
import CustomerSelect from './components/CustomerSelect.vue'

// 搜索表单数据
const searchForm = reactive({
  packagingCode: '',
  salesCode: '',
  salesOrderNo: '',
  clientCode: '',
  clientName: '',
  inspectorName: ''
})

// 分页相关数据
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)
const tableData = ref([])
const loading = ref(false)

// 对话框相关数据
const addDialogVisible = ref(false)

// 查看详情相关数据
const viewDialogVisible = ref(false)
const viewFormRef = ref(null)
const viewForm = reactive({
  packagingCode: '',
  packagingName: '',
  salesCode: '',
  invoiceCode: '',
  clientCode: '',
  clientName: '',
  boxLength: '',
  boxWidth: '',
  boxHeight: '',
  netweight: '',
  grossWeight: '',
  inspectorName: '',
  descs: ''
})

// 修改对话框相关数据
const editDialogVisible = ref(false)
const editFormRef = ref(null)
const submitLoading = ref(false)

// 表单校验规则
const formRules = {
  packagingCode: [{ required: true, message: '请输入装箱单号', trigger: 'blur' }],
  packagingName: [{ required: true, message: '请选择装箱日期', trigger: 'change' }],
  salesCode: [{ required: true, message: '请输入销售订单编号', trigger: 'blur' }],
  clientCode: [{ required: true, message: '请输入客户编码', trigger: 'blur' }],
  clientName: [{ required: true, message: '请输入客户名称', trigger: 'blur' }],
  inspectorName: [{ required: true, message: '请输入检查员名称', trigger: 'blur' }]
}

// 单位选项
const unitOptions = [
  '0', '1', '2', '3', '4', '5', '10', '15', '20', '25', '30', '35', '40', '45', '50',
  '100', '150', '200', '250', '300', '350', '400', '450', '500', '1000'
]

// 单位选择
const boxLengthUnit = ref('公支')
const netweightUnit = ref('公支')

// 客户选择对话框
const customerSelectVisible = ref(false)

// 客户选择对话框 - 搜索表单使用
const customerSelectSearchVisible = ref(false)

// 编辑表单数据
const editForm = reactive({
  id: 0,
  packagingCode: '',
  packagingName: '',
  salesCode: '',
  clientCode: '',
  clientName: '',
  invoiceCode: '',
  boxLength: 0,
  boxWidth: 0,
  boxHeight: 0,
  netweight: 0,
  grossWeight: 0,
  inspectorName: '',
  descs: '',
  autoGenerate: false
})

// 格式化日期
const formatDate = (dateStr) => {
  if (!dateStr) return '-'
  const date = new Date(dateStr)
  return date.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit',
    hour12: false
  }).replace(/\//g, '-')
}

// 打开客户选择对话框
const openCustomerSelect = () => {
  customerSelectVisible.value = true
}

// 处理客户选择
const handleCustomerSelect = (customer) => {
  editForm.clientCode = customer.custCode
  editForm.clientName = customer.custName
}

// 打开客户选择对话框 - 搜索表单使用
const openCustomerSelectSearch = () => {
  customerSelectSearchVisible.value = true
}

// 处理客户选择 - 搜索表单使用
const handleCustomerSelectSearch = (customer) => {
  searchForm.clientCode = customer.custCode
  searchForm.clientName = customer.custName
}

// 获取表格数据
const fetchData = async () => {
  loading.value = true
  try {
    const queryParams = {
      PageIndex: currentPage.value,
      PageSize: pageSize.value,
      SearchKeyword: ''
    }

    if (searchForm.packagingCode) queryParams.PackagingCode = searchForm.packagingCode.trim()
    if (searchForm.salesCode) queryParams.SalesCode = searchForm.salesCode.trim()
    if (searchForm.salesOrderNo) queryParams.SalesOrderNo = searchForm.salesOrderNo.trim()
    if (searchForm.clientCode) queryParams.ClientCode = searchForm.clientCode.trim()
    if (searchForm.clientName) queryParams.ClientName = searchForm.clientName.trim()
    if (searchForm.inspectorName) queryParams.InspectorName = searchForm.inspectorName.trim()

    console.log('请求参数:', queryParams)

    const response = await http.get('/api/Container/QueryContainerList', queryParams)

    console.log('API响应:', response)

    if (response?.data?.items && Array.isArray(response.data.items)) {
      tableData.value = response.data.items
      total.value = response.data.total || response.data.items.length || 0
    } else {
      tableData.value = []
      total.value = 0
    }

    if (tableData.value.length === 0) {
      ElMessage.info('暂无数据')
    }
  } catch (error) {
    console.error('获取数据错误:', error)
    ElMessage.error('获取数据失败：' + (error.message || '未知错误'))
    tableData.value = []
    total.value = 0
  } finally {
    loading.value = false
  }
}

// 搜索
const handleSearch = () => {
  currentPage.value = 1
  fetchData()
}

// 重置
const handleReset = () => {
  Object.keys(searchForm).forEach(key => {
    searchForm[key] = ''
  })
  currentPage.value = 1
  pageSize.value = 10
  fetchData()
}

// 分页大小改变
const handleSizeChange = (val) => {
  console.log('每页条数改变:', val)
  pageSize.value = val
  currentPage.value = 1
  fetchData()
}

// 页码改变
const handleCurrentChange = (val) => {
  console.log('页码改变:', val)
  currentPage.value = val
  fetchData()
}

// 新增
const handleAdd = () => {
  addDialogVisible.value = true
}

// 新增成功回调
const handleAddSuccess = () => {
  fetchData()
}

// 删除
const handleDelete = (row) => {
  ElMessageBox.confirm(
    '确定要删除这条记录吗？',
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(async () => {
      try {
        const res = await http.get(`/api/Container/DeleteContainer?id=${row.id}`)
        if (res.status === true) {
          ElMessage.success('删除成功')
          fetchData()
        } else {
          ElMessage.error(res.message || '删除失败')
        }
      } catch (error) {
        console.error('删除失败:', error)
        ElMessage.error('删除失败: ' + (error.message || '未知错误'))
      }
    })
    .catch(() => {
      // 取消删除
    })
}

// 查看详情
const handleView = (row) => {
  viewDialogVisible.value = true
  // 直接使用表格行数据进行反填
  viewForm.packagingCode = row.packagingCode || ''
  viewForm.packagingName = row.packagingName || ''
  viewForm.salesCode = row.salesCode || ''
  viewForm.invoiceCode = row.invoiceCode || ''
  viewForm.clientCode = row.clientCode || ''
  viewForm.clientName = row.clientName || ''
  viewForm.boxLength = row.boxLength || ''
  viewForm.boxWidth = row.boxWidth || ''
  viewForm.boxHeight = row.boxHeight || ''
  viewForm.netweight = row.netweight || ''
  viewForm.grossWeight = row.grossWeight || ''
  viewForm.inspectorName = row.inspectorName || ''
  viewForm.descs = row.descs || ''
}

// 重置表单
const handleEditDialogClose = () => {
  editFormRef.value?.resetFields()
  Object.keys(editForm).forEach(key => {
    if (key === 'autoGenerate') {
      editForm[key] = false
    } else if (['boxLength', 'boxWidth', 'boxHeight', 'netweight', 'grossWeight'].includes(key)) {
      editForm[key] = 0
    } else {
      editForm[key] = ''
    }
  })
}

// 生成装箱单编号
const generatePackagingCode = () => {
  const now = new Date()
  const year = now.getFullYear()
  const month = String(now.getMonth() + 1).padStart(2, '0')
  const day = String(now.getDate()).padStart(2, '0')
  const hours = String(now.getHours()).padStart(2, '0')
  const minutes = String(now.getMinutes()).padStart(2, '0')
  const seconds = String(now.getSeconds()).padStart(2, '0')
  return `PACK${year}${month}${day}${hours}${minutes}${seconds}`
}

// 监听自动生成开关
watch(() => editForm.autoGenerate, (newVal) => {
  if (newVal) {
    editForm.packagingCode = generatePackagingCode()
  }
})

// 编辑
const handleEdit = (row) => {
  editDialogVisible.value = true
  // 直接使用表格行数据进行反填
  editForm.id = row.id
  editForm.autoGenerate = false // 重置自动生成开关
  editForm.packagingCode = row.packagingCode || ''
  // 处理日期格式
  if (row.packagingName) {
    const date = new Date(row.packagingName)
    editForm.packagingName = date.toISOString()
  } else {
    editForm.packagingName = ''
  }
  editForm.salesCode = row.salesCode || ''
  editForm.invoiceCode = row.invoiceCode || ''
  editForm.clientCode = row.clientCode || ''
  editForm.clientName = row.clientName || ''
  editForm.boxLength = Number(row.boxLength) || 0
  editForm.boxWidth = Number(row.boxWidth) || 0
  editForm.boxHeight = Number(row.boxHeight) || 0
  editForm.netweight = Number(row.netweight) || 0
  editForm.grossWeight = Number(row.grossWeight) || 0
  editForm.inspectorName = row.inspectorName || ''
  editForm.descs = row.descs || ''
}

// 提交编辑
const submitEdit = async () => {
  if (!editFormRef.value) return
  
  await editFormRef.value.validate(async (valid) => {
    if (valid) {
      submitLoading.value = true
      try {
        // 构造提交的数据
        const submitData = {
          id: editForm.id,
          packagingCode: editForm.packagingCode,
          packagingName: editForm.packagingName,
          salesCode: editForm.salesCode,
          clientCode: editForm.clientCode,
          clientName: editForm.clientName,
          invoiceCode: editForm.invoiceCode,
          boxLength: Number(editForm.boxLength) || 0,
          boxWidth: Number(editForm.boxWidth) || 0,
          boxHeight: Number(editForm.boxHeight) || 0,
          netweight: Number(editForm.netweight) || 0,
          grossWeight: Number(editForm.grossWeight) || 0,
          inspectorName: editForm.inspectorName,
          descs: editForm.descs
        }
        
        console.log('提交的数据:', submitData)
        const response = await http.post('/api/Container/UpdateContainer', submitData)
        if (response.status === true) {
          ElMessage.success('修改成功')
          editDialogVisible.value = false
          fetchData()
        } else {
          ElMessage.error(response.message || '修改失败')
        }
      } catch (error) {
        console.error('修改失败:', error)
        ElMessage.error('修改失败: ' + (error.message || '未知错误'))
      } finally {
        submitLoading.value = false
      }
    }
  })
}

// 组件挂载时获取数据
onMounted(() => {
  fetchData()
})
</script>

<style scoped>
.container-page {
  padding: 20px;
  height: 100%;
  background-color: #f0f2f5;
}

.search-container {
  background: #fff;
  padding: 20px;
  border-radius: 4px;
  margin-bottom: 20px;
  box-shadow: 0 1px 4px rgba(0,21,41,.08);
}

.table-container {
  background: #fff;
  padding: 20px;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0,21,41,.08);
}

.table-operations {
  margin-bottom: 16px;
}

.pagination-container {
  margin-top: 20px;
  padding: 10px 20px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 16px;
  background-color: #fff;
  border-radius: 4px;
}

.pagination-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.total-text {
  color: #606266;
  font-size: 13px;
}

.page-size-select {
  width: 110px;
}

:deep(.el-pagination) {
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
}

:deep(.el-pagination.is-background .el-pager li:not(.is-disabled).is-active) {
  background-color: #409eff;
}

:deep(.el-pagination .el-input__inner) {
  height: 32px;
  line-height: 32px;
}

:deep(.el-select .el-input__inner) {
  height: 32px;
  line-height: 32px;
}

:deep(.el-pagination button),
:deep(.el-pagination .el-pager li) {
  min-width: 32px;
  height: 32px;
  line-height: 32px;
}

:deep(.el-table) {
  margin-bottom: 20px;
}

:deep(.el-table .el-table__row) {
  cursor: pointer;
}

:deep(.el-table .el-table__row:hover) {
  background-color: #f5f7fa;
}

:deep(.el-tag) {
  border-radius: 2px;
}

:deep(.el-button--link) {
  padding: 2px 4px;
}

:deep(.el-table .cell) {
  padding: 8px;
}

:deep(.el-input.is-disabled .el-input__wrapper) {
  background-color: #f5f7fa;
}

:deep(.el-textarea.is-disabled .el-textarea__inner) {
  background-color: #f5f7fa;
}

.view-form {
  padding: 20px;
}

.view-form :deep(.el-input__wrapper) {
  background-color: #f5f7fa;
}

.view-form :deep(.el-textarea__inner) {
  background-color: #f5f7fa;
}

:deep(.el-form-item__label) {
  font-weight: bold;
}

.edit-form {
  padding: 20px;
}

.dialog-footer {
  padding: 20px 0 0;
  text-align: right;
}

:deep(.el-form-item__label) {
  font-weight: bold;
}

:deep(.el-input-group__append) {
  padding: 0;
  overflow: hidden;
}

:deep(.el-select .el-input__wrapper) {
  border: none;
  box-shadow: none;
}

.input-with-unit {
  position: relative;
  display: flex;
  align-items: center;
}

.unit-text {
  margin-left: 8px;
  color: #606266;
}

:deep(.el-input__wrapper) {
  flex: 1;
}

.custom-select {
  width: 100%;
}

:deep(.custom-select .el-input__wrapper) {
  background-color: var(--el-fill-color-blank);
  border: 1px solid var(--el-border-color);
  border-radius: 4px;
  box-shadow: none !important;
}

:deep(.custom-select .el-input__wrapper:hover) {
  border-color: var(--el-border-color-hover);
}

:deep(.custom-select .el-input__wrapper.is-focus) {
  border-color: var(--el-color-primary);
}

:deep(.custom-select .el-input__inner) {
  height: 32px;
  line-height: 32px;
  padding: 0 12px;
}

:deep(.custom-select .el-input__suffix) {
  right: 8px;
}
</style>